<template>
	<view class="wrap">
		<!-- 首页轮播图组件 -->
		<u-swiper :list="list" class=""></u-swiper>
		<!-- 首页选项卡组件 -->
		<sub-section :section="sectionBar" @sectionIndex="changeSeciton" class="wrap-section"></sub-section>
		<!-- 商品列表 -->
		<view class="">
			<book-list :bookList="books"></book-list>
		</view>
		<!-- 骨架屏组件 -->
		<!-- <u-skeleton :loading="show" :animation="true"></u-skeleton> -->
		<!-- 导入backTop组价 -->
		<!-- <back-top></back-top> -->
	</view>
</template>

<script>
	// 导入轮播图组件
	import swiper from "../../commponts/swiper.vue"
	//导入选项卡组件
	import subSection from '../../commponts/subSection.vue'
	// 导入book列表组件
	import bookList from '../../commponts/bookList.vue'
	// 导入bakcTop组件
	import backTop from '../../commponts/backTop.vue'
	export default {
		components: {
			swiper,
			subSection,
			bookList,
			backTop
		},
		data() {
			return {
				// 首页轮播图数据
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				sectionBar: ['默认', '销量', '推荐', '最新'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				// book列表数据
				books: [],
				show:false,
				page:1,
				// 选项卡的编号
				sectionNum:0,
				scale:0,
				recommend:0,
				new:0

			}
		},
		onLoad() {
			// this.show=true;
			this.getdata();
		},
		methods: {
			// 分装首页请求数据接口api
			async getdata() {
				this.show=true
				// 判断点击选项卡对应的参数,根据参数请求数据
				const params={
					page:this.page,
				}
				if(this.sectionNum===1) params.sales=1;
				if(this.sectionNum===2) params.recommend=1;
				if(this.sectionNum===3) params.new=1;
				await this.$u.get('/api/index',params).then(res => {
					this.show=false;
					this.books = [...this.books,...res.data.goods.data];
					
				}).catch(err => {
					console.log(err)
				})
			},
			// 触底事件
			onReachBottom(){
				this.page=this.page + 1;
				this.getdata(this.page)
			},
			// 下拉刷新
			onPullDownRefresh(){
				
			},
			// 监听subSection组件传递的选项卡编号
			changeSeciton(res){
				this.sectionNum=res;
				this.books=[],
				this.page=1
				this.getdata()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.book-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	
		.book-list-item {
			width: 45%;
			// height: 300px;
			margin-bottom: 30px;
		}
	}
	
	image {
		width: 100%;
		height: 60%;
	}
	
	.book-list-item-price {
		display: flex;
		justify-content: space-between;
	
		.price {
			color: red;
			width: 30%;
		}
	
		.salce {
			color: #C0C0C0;
			width: 50%;
		}
	}
	.book-list-title{
		overflow: hidden;
		text-overflow:ellipsis;
		margin: 20px 0 20px 0;
		white-space: nowrap;
	}
	.wrap {
		padding: 40rpx;
		// height: 100%;
	}
	.wrap-section{
		margin-top: 30px;
	}
</style>
